<template>
    <view class="appeal-model" v-if="show">
        <view class="mark" @click.stop="closed">

        </view>
        <view class="drawer" @click.stop="">
            <view class="drawer-header">
                <view class="drawer-header-touch" @click.stop="closed"></view>
                <!-- 顶部进度条信息 S -->
                <view class="drawer-header-title">
                    <view class="dht-txt">
                        AI结果申诉
                    </view>
                    <view class="dht-dsp">
                        AI检测到该图片存在<text class="light">不合规</text>风险。若对检测结果有异议，可进行结果申诉。工单评分时该图片将进行人工审核。
                    </view>
                </view>
                <!-- 顶部进度条信息 E -->

                <!-- 状态 S -->
                <view class="appeal-status" v-if="imgInfo.desc">
                    <view class="appeal-status-item act">
                        <view class="asi-ico">
                            1
                        </view>
                        <view class="asi-name">
                            AI结果申诉中
                        </view>
                    </view>

                    <view :class="['appeal-status-item', imgInfo.status > 1 ? 'act' : '']">
                        <view class="asi-ico">
                            2
                        </view>
                        <view class="asi-name">
                            {{imgInfo.status>1?'已审核':'待审核'}}
                        </view>
                    </view>
                </view>
                <!-- 状态 E -->
            </view>

            <!-- 选择题内容 S -->
            <scroll-view @scroll="onScroll" ref="scrollView" scroll-y class="drawer-content">

                <view class="options">
                    <view class="options-tips">
                        请选择对AI结果有异议的选项
                    </view>
                    <label class="options-item" @click="fullSelect" v-if="!imgInfo.desc&&imgInfo.status <= 1">
                        <radio :disabled="imgInfo.desc" color="#0091FF" class="options-item-radio"
                            :checked="selected.length == options.length" />全选
                    </label>
                    <label class="options-item" @click="selectFuc(item.key)" v-for="(item, index) in options"
                        :key="index">
                        <radio color="#0091FF" class="options-item-radio" :disabled="imgInfo.desc||imgInfo.status > 1"
                            :checked="selected.indexOf(item.key) != -1" />{{ Array.isArray(item.reason) ? item.reason[0].businessReason : item.reason.businessReason }}
                    </label>
                </view>

            </scroll-view>
            <!-- 选择题内容 E -->
            <view class="drawer-footer" v-if="!imgInfo.desc&&imgInfo.status <= 1">

                <view class="drawer-footer-btn">
                    <view class="dfb-item" @click.stop="closed">
                        取消
                    </view>
                    <view :class="['dfb-item', selected.length == 0 ? 'disabled' : 'submit']" @click="submitFuc">
                        确定
                    </view>
                </view>
            </view>

            <view class="drawer-info" v-if="imgInfo.status > 1">
                <view class="drawer-info-title">
                    审核信息
                </view>
                <view class="drawer-info-item">
                    <view class="drawer-info-item">
                        <text class="label">人工审核</text>
                        AI结果:{{ ['未判定', '正确', '错误'][imgInfo.status - 1] }}
                    </view>
                    <view class="drawer-info-item">
                        <text class="label">审核人</text>
                        {{ imgInfo.updateUserName }}
                    </view>
                </view>
                <view class="drawer-info-item">
                    <text class="label">审核时间</text>
                    {{ imgInfo.auditTime }}
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getImageInfo, setImageInfo,setImageAppeal } from '@/apis/system';
export default {
	name: 'appeal-model',
	data() {
		return {
			url: '',
			options: [],
			show: false,
			scrollTop: 0,
			imgInfo: {},
			selected: []
		};
	},
	mounted() {
	},
	methods: {
		fullSelect() {
			if (this.imgInfo.desc) {
				return;
			}
			if (this.selected.length == this.options.length) {
				this.selected = [];
			} else {
				this.selected = this.options.map((item) => {
					return item.key;
				});
			}
			this.$forceUpdate();
		},
		selectFuc(key) {
			if (this.imgInfo.desc) {
				return;
			}
			let idx = this.selected.indexOf(key);
			if (idx == -1) {
				this.selected.push(key);
			} else {
				this.selected.splice(idx, 1);
			}
		},
		// 提交
		async submitFuc() {
			if (this.selected.length == 0) {
				return;
			}
			uni.showModal({
				title: '提示',
				content: '是否确定提交申诉?',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中',
							mask: true
						});
						let info = this.imgInfo;
						info.desc = this.selected.join(',');
						setImageAppeal(info).then(() => { 
							uni.hideLoading();
							uni.showToast({
								title:'提交成功',
								icon:'none',
								mask:true
							});
							setTimeout(() => {
								this.closed(true);
								// this.getImageInfo();
							}, 300);
						}).catch(err=>{
							if (err.msg) {
								uni.hideLoading();
								uni.showToast({
									title:err.msg,
									icon:'none',
									mask:true
								});
							}
							setTimeout(() => {
								this.getImageInfo();
							}, 300); 
						});
					}
				},
			});
		},
		async getImageInfo() {
			let info = await getImageInfo({ url: this.url });
			if (info && info.data) {
				this.imgInfo = info.data;
				if (info.data.desc) {
					this.selected = info.data.desc.split(',');
				}
			} else {
				this.imgInfo = {};
			}
			return;
		},

		async init(form, options = []) {
			this.selected = [];
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.options = options;
			this.url = form.url;
			await this.getImageInfo();

			this.show = true;
			uni.hideLoading();
			console.log(this.imgInfo);
		},

		closed(evn = false) {
			this.show = false;
			if (evn) {
				this.$emit('closed',true);
			}
		},

		onScroll(e) {

		}
	}
};
</script>
<style lang="scss" scoped>
.appeal-model {
    .mark {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.1696);
        z-index: 99;
    }

    @keyframes frame {
        from {
            bottom: -70vh;
        }

        to {
            bottom: 0;
        }
    }

    .drawer {
        width: 100%;
        height: 80vh;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        animation: frame 0.2s linear;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        &-header {
            background-color: #fff;

            &-touch {
                width: 100%;
                height: 10px;
                padding: 20rpx 0;
                position: relative;
            }

            &-touch::after {
                content: '';
                position: absolute;
                width: 64rpx;
                height: 10rpx;
                border-radius: 2rem;
                left: calc(50% - 32rpx);
                background: #D8D8D8;
            }

            &-title {
                width: calc(100% - 60rpx);
                border-bottom: 1px solid #D8D8D8;
                padding: 0 30rpx;
                padding-bottom: 30rpx;

                .dht-txt {
                    width: 100%;
                    color: #333333;
                    font-weight: bold;
                    font-size: 32rpx;
                }

                .dht-dsp {
                    width: 100%;
                    color: #666666;
                    font-size: 24rpx;
                    font-weight: normal;
                    padding-top: 10rpx;

                    .light {
                        color: #E02020;
                    }
                }

            }

            .appeal-status {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                padding: 20rpx 0;
                padding-top: 30rpx;

                &-item {
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 176px;
                    position: relative;

                    .asi-ico {
                        width: 48rpx;
                        height: 48rpx;
                        line-height: 48rpx;
                        border-radius: 2rem;
                        background: #CDD9E1;
                        color: #fff;
                        font-size: 24rpx;
                        text-align: center;
                        z-index: 9;
                    }

                    .asi-name {
                        color: #999999;
                        font-size: 26rpx;
                        text-align: center;
                        width: 100%;
                        padding-top: 10rpx;
                    }
                }

                &-item::before {
                    content: '';
                    width: 304rpx;
                    background-color: #CDD9E1;
                    height: 4rpx;
                    // z-index: -1; 
                    position: absolute;
                    top: 22rpx;
                    left: -152rpx;

                }

                &-item:first-child::before {
                    display: none
                }

                .act .asi-name {
                    color: #0091FF !important;
                }

                .act .asi-ico {
                    color: #fff !important;
                    background: #0091FF !important;
                }

                .act::before {
                    background-color: #0091FF;
                }
            }

        }

        &-content {
            flex: 1;
            width: 100%;
            height: calc(100% - 160rpx - 110rpx);
            overflow-y: scroll;
            color: #333333;

            .options {
                width: calc(100% - 60rpx);
                padding: 0rpx 30rpx;
                margin-top: 20rpx;

                &-tips {
                    color: #666666;
                    font-size: 24rpx;
                }

                &-item {
                    color: #333;
                    font-size: 28rpx;
                    border-bottom: 1px solid #D8D8D8;
                    display: flex;
                    width: 100%;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 20rpx 0;

                    &-radio {
                        transform: scale(0.8);
                    }
                }

                &-item:last-child {
                    border: none;
                }
            }

        }

        &-info {
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #D8D8D8;
            padding: 30rpx;
            font-size: 28rpx;
            color: #333;
            line-height: 46rpx;

            &-title {
                font-weight: bold;
            }

            &-item {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: flex-start;

                .label {
                    color: #999999;
                    margin-right: 10rpx;
                }
            }

        }

        &-footer {
            height: 110rpx;
            width: 100%;
            background-color: #fff;
            border-top: 1px solid #D8D8D8;
            padding-bottom: 20rpx;

            &-btn {
                width: calc(100% - 80rpx);
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8rpx;
                margin: 12px auto;
                font-size: 29rpx;
                text-align: center;
                overflow: hidden;

                .dfb-item {
                    width: 50%;
                    color: #0091FF;
                    line-height: 70rpx;
                    height: 100%;
                    background-color: #F5FBFF;
                }

                .disabled {
                    color: #CCCCCC;
                    background-color: #EFEFEF;
                }

                .submit {
                    color: #fff;
                    background-color: #0091FF;
                }
            }

        }

    }
}
</style>